<template>
  <div class="mainos">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10">
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>验收</span>
          </div>
        </div>
        <div class="main_tile boxdq marginTop10">
          <div class="main_tile_l marginLeft0"><em></em>订单详情</div>
        </div>
        <div class="main_xq">
          <ul class="boxha">
            <li>
              订单号：<span>{{ info.info.order_sn }}</span>
            </li>
            <li>
              用户名称：<span>{{ info.info.member.nickname }}</span>
            </li>
            <li>
              收货人信息：<span>{{
                info.info.member.mobile + " " + info.info.address
              }}</span>
            </li>
            <li>
              下单日期：<span>{{
                parseTime(info.info.created_at, "{y}-{m}-{d}")
              }}</span>
            </li>
            <li>
              配送日期：<span>{{
                parseTime(info.info.send_time, "{y}-{m}-{d}")
              }}</span>
            </li>
            <li>
              订单状态：<span>{{
                info.order_status[info.info.order_status]
              }}</span>
            </li>
            <li>
              支付状态：<span>{{ info.pay_type[info.info.pay_status] }}</span>
            </li>
            <li>
              下单金额：<span>{{ info.info.order_money }}</span>
            </li>
            <li>
              配送金额 ：<span>{{ info.info.send_money }}</span>
            </li>
            <li>
              退货金额：<span>{{ info.info.return_money }}</span>
            </li>
            <li>
              优惠金额：<span>{{ info.info.discount_money }}</span>
            </li>
            <li>仓库：<span></span></li>
            <li>
              运费：<span>{{ info.info.delivery_fee }}</span>
            </li>
            <li>
              订单来源：<span>{{ info.from[info.info.from] }}</span>
            </li>
            <li class="main_w100">
              订单备注：<span>{{ info.info.remark }}</span>
            </li>
          </ul>
        </div>
        <div class="main_tile boxdq marginTop10">
          <div class="main_tile_l marginLeft0"><em></em>商品详情</div>
          <div class="mainos_tile_r">合计：{{ total }}元</div>
        </div>
        <el-form
          :inline="true"
          :rules="rules"
          :model="info.info"
          class="demo-form-inline"
          ref="userListFrom"
          label-width="80px"
        >
          <div class="main_table marginTop0" style="min-height: 370px">
            <el-table
              ref="multipleTable"
              v-loading="listLoading"
              :data="info.info.order_list"
              element-loading-text="加载中"
              fit
              highlight-current-row
            >
              <el-table-column label="序号">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column
                label="商品名称"
                width="220"
                prop="name"
                class-name="main_hei"
              >
                <template slot-scope="scope"
                  >{{ scope.row.name }}【{{ scope.row.spu_name }}】</template
                >
              </el-table-column>
              <el-table-column label="单位" prop="unit" class-name="main_hei" />
              <el-table-column
                label="配送数量"
                width="150"
                prop="sort_num"
                class-name="main_hei"
              />
              <el-table-column
                label="配送单价"
                width="150"
                prop="sort_price"
                class-name="main_hei"
              />
              <el-table-column
                label="配送金额"
                width="150"
                prop="userNickname"
                class-name="main_hei"
              />
              <el-table-column
                label="验收数量"
                width="170"
                prop="weight"
                class-name="main_hei"
              >
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'order_list.' + scope.$index + '.weight'"
                    :rules="rules.weight"
                    label-width="10px"
                    label=" "
                  >
                    <el-input
                      v-model.trim="scope.row.weight"
                      placeholder="验收数量"
                      class="wid110"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                label="验收单价"
                width="170"
                prop="price"
                class-name="main_hei"
              >
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'order_list.' + scope.$index + '.price'"
                    :rules="rules.price"
                    label-width="10px"
                    label=" "
                  >
                    <el-input
                      v-model.trim="scope.row.price"
                      placeholder="验收单价"
                      class="wid110"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                label="验收金额"
                width="150"
                class-name="main_hei"
              >
                <template slot-scope="scope">
                  {{ (scope.row.weight * scope.row.price) | twoPlace }}
                </template>
              </el-table-column>
              <el-table-column
                label="备注"
                width="340"
                prop="remark"
                class-name="main_hei"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model.trim="scope.row.remark"
                    placeholder="备注"
                    class="wid240"
                  ></el-input>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form>

        <div class="newConBox_p200 paddingBottom10" id="newConBox">
          <div class="newConBox_h32">
            <div
              :class="['mainor_pr boxdq newConBox ', { on: searchBarFixed }]"
            >
              <div class="mainor_prl">
                <el-button type="primary" @click="preservation" v-repeatClick
                  >保存</el-button
                >
                <el-button @click="$router.back(-1)">取消</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { order_info, order_checkOrder } from "@/api/order/orderList";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime } from "@/utils/index";
import rules from "@/rules/order/orderList_check";

export default {
  computed: {
    total() {
      let sz = 0;
      this.info.info.order_list.forEach((e) => {
        sz += parseFloat(
          this.$toFixed(parseFloat(e.order_num * e.order_price))
        );
      });
      return this.$toFixed(sz);
    },
  },
  components: {},
  data() {
    return {
      // 验证
      rules,
      // 时间
      parseTime,
      // 基本信息
      info: {
        info: {
          from: 0,
          created_at: "2000-01-01",
          send_time: "2000-01-01",
          address: "",
          order_list: [],
          member: {
            mobile: "",
          },
        },
        from: ["后台"],
        order_status: ["待审核"],
        pay_type: [],
      },
      listLoading: false,
      // id
      id: this.$route.params.id,
      // 监听滚动
      searchBarFixed: false,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  created() {
    // 基本信息
    this.order_info();
  },
  methods: {
    // 监听滚动
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      scrollTop + document.documentElement.clientHeight >
      document.getElementById("newConBox").offsetTop + 300
        ? (this.searchBarFixed = false)
        : (this.searchBarFixed = true);
    },
    // 基本信息
    order_info() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: this.id })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: this.id }
      );
      order_info(data).then((res) => {
        if (res.errcode == 0) {
          this.info = res.data;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 保存
    preservation(type) {
      this.$refs["userListFrom"].validate((valid) => {
        if (valid) {
          let num = 0;
          let arry = [];
          let list = JSON.parse(JSON.stringify(this.info.info.order_list));
          list.map((e) => {
            if (parseFloat(e.weight) > 0 && parseFloat(e.price) == 0) {
              num++;
            }
            if (parseFloat(e.weight) == 0 && parseFloat(e.price) > 0) {
              num++;
            }
            arry.push({
              id: e.id,
              weight: e.weight,
              price: e.price,
              remark: e.remark,
            });
          });
          if (num > 0) {
            this.$message.error("请输入验收数量和验收单价大于0或者都不输入");
            return;
          }
          let data = Object.assign(
            {
              sign: Md5(
                objKeySort(Object.assign(apiUrl().name, { id: this.id })) +
                  apiUrl().appsecret
              ),
            },
            apiUrl().name,
            { id: this.id, list: JSON.stringify(arry) }
          );
          order_checkOrder(data).then((res) => {
            if (res.errcode == 0) {
              this.$message({
                message: "验证成功",
                type: "success",
              });
              this.$router.go(-1);
            } else {
              this.$message.error(res.errmsg);
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainos {
  .main_tile {
    .mainos_tile_r {
      color: $colour_red;
      font-size: $font_14;
    }
  }
  .main_table {
    /deep/.el-table--small td {
      padding-top: 0;
    }
    /deep/.el-form-item--small.el-form-item {
      margin-bottom: 16px;
      margin-top: 16px;
      margin-right: 0;
    }
  }
  .mainor_pr {
    margin-left: 10px;
    margin-bottom: 10px;
  }
  .newConBox.on {
    margin-left: -10px;
  }
}
</style>
